<template>
    <div class="write-blogArticle">
        <div class="form">
            <el-input v-model="form.title" placeholder="文章标题"></el-input>
            <el-button type="primary" @click="openDrawer">文章设置</el-button>
        </div>
        <MyEditor ref="editor"></MyEditor>
        <el-drawer :visible.sync="drawer" :with-header="false">
            <el-form ref="form" :model="form" label-width="80px" class="drawer-card">
                <el-form-item label="文章摘要">
                    <el-input type="textarea" v-model="form.summary" placeholder="不填默认为文章内容"></el-input>
                </el-form-item>
                <el-form-item label="文章分类">
                    <el-select v-model="form.categoryId" placeholder="请选择文章分类">
                        <el-option :label="item.name" :value="item.id" v-for="item, index in categoryList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章标签">
                    <el-select v-model="form.tags" placeholder="请选择文章标签" multiple>
                        <el-option :label="item.name" :value="item.id" v-for="item, index in tagList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否评论">
                    <el-radio-group v-model="form.isNeedComment">
                        <el-radio v-for="item, index in commonYnStatus" :key="index" :label="parseInt(item.dictValue)">{{
                            item.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否置顶">
                    <el-radio-group v-model="form.isTop">
                        <el-radio v-for="item, index in commonYnStatus" :key="index" :label="parseInt(item.dictValue)">{{
                            item.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="文章状态">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="item, index in articleStatus" :key="index" :label="parseInt(item.dictValue)" >{{item.dictLabel}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="文章封面">
                    <MyUpload ref="childUpload" @callParent="transDownloadUrl"></MyUpload>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="saveAsArticle">更新文章</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
import { getArticle, updateArticle } from '@/api/blog/blogArticle';
import { listCategory } from '@/api/blog/category';
import { listTag } from '@/api/blog/tag';
import { listFrontData } from '@/api/system/dict/data';
import MyEditor from '../components/editor';
import MyUpload from '@/components/MyUpload';

export default {
    name: 'blog-edit-blogArticle',
    components: {
        MyEditor,
        MyUpload
    },
    data() {
        return {
            form: {
                title: null,
                categoryId: null,
                isNeedComment: null,
                isTop: null
            },
            drawer: false,
            categoryList: [],
            tagList: [],
            commonYnStatus: [],
            articleStatus: []
        }
    },
    mounted() {
        this.getCategoryList();
        this.getTagList();
        this.getCommonYnStatus();
        this.getArticleInfo();
        this.getArticleStatus();
    },
    methods: {
        getArticleInfo() {
            getArticle(this.$route.params.articleId).then((res) => {
                this.form = res.data;
                this.$nextTick(() => {
                    this.$refs.editor.contentEditor.setValue(res.data.mdContent);
                });
            })
        },
        getCategoryList() {
            listCategory().then((res) => {
                this.categoryList = res.rows;
            })
        },
        getTagList() {
            listTag().then((res) => {
                this.tagList = res.rows;
            })
        },
        getCommonYnStatus() {
            listFrontData({
                dictType: "common_yn_status"
            }).then((res) => {
                this.commonYnStatus = res.rows;
            })
        },
        getArticleStatus() {
            listFrontData({
                dictType: "blog_article_status"
            }).then((res) => {
                this.articleStatus = res.rows;
            })
        },
        transDownloadUrl(url) {
            this.form.cover = url;
        },
        saveAsArticle() {
            this.onSubmit();
        },
        onSubmit() {
            this.form.mdContent = this.$refs.editor.contentEditor.getValue();
            this.form.htmlContent = this.$refs.editor.contentEditor.getHTML();
            updateArticle(this.form).then((res) => {
                this.$message.success("更新成功");
            })
        },
        openDrawer() {
            this.drawer = true;
            if (this.form.articleCover != null) {
                this.$nextTick(() => {
                    this.$refs.childUpload.setImgUrl(this.form.articleCover);
                });
            }
        }
    },
}
</script>

<style scoped>
.write-blogArticle {
    margin: 0 auto;
    padding: 20px;
}

.form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form .el-input {
    font-size: 20px;
}

.drawer-card {
    padding: 20px;
}

::v-deep input[aria-hidden="true"] {
    display: none !important;
}

::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}
</style>
